<template>
    <div :style="styleCup" ref="echartsRef" @mouseover="mouseover" @mouseleave="mouseleave"></div>
</template>

<script setup lang="ts">
import { useEcharts, EChartsCoreOption } from 'hooks/useEcharts'; // 引入hooks

const props = defineProps({
    options: { type: Object as PropType<EChartsCoreOption>, required: true },
    styleConfig: { type: Object, default: {} },
    chartConfig: { type: Object, default: () => ({ isShuffling: true, timeInterval: 2000 }) }
});
const styleCup = computed(() =>
    Object.assign({}, { height: '100%', width: '100%' }, props.styleConfig)
);
const echartsRef = ref();

const { setOptions, initCharts, tooltipShuffling, clearIntervalTime } = useEcharts(
    echartsRef,
    props.options
);
const mouseover = () => {
    if (!props.chartConfig.isShuffling) return;
    clearIntervalTime();
};
const mouseleave = () => {
    if (!props.chartConfig.isShuffling) return;
    tooltipShuffling((props.options.series as any)[0].data.length, props.chartConfig.timeInterval);
};
watch(
    () => props.options,
    (nVal: EChartsCoreOption, _oVal: EChartsCoreOption) => {
        setOptions({ ...nVal });
        props.chartConfig.isShuffling &&
            tooltipShuffling((nVal.series as any)[0].data.length, props.chartConfig.timeInterval);
    },
    { deep: true }
);
onMounted(() => {
    initCharts();
    props.chartConfig.isShuffling &&
        tooltipShuffling(
            (props.options.series as any)[0].data.length,
            props.chartConfig.timeInterval
        );
});
onActivated(() => {
    props.chartConfig.isShuffling &&
        tooltipShuffling(
            (props.options.series as any)[0].data.length,
            props.chartConfig.timeInterval
        );
});
onDeactivated(() => {
    clearIntervalTime();
});
onBeforeUnmount(() => {
    clearIntervalTime();
});
</script>
